<template>
    <div class="app-header navbar">
        <!-- navbar header -->
        <div class="navbar-header bg-black">
            <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
                <i class="glyphicon glyphicon-cog"></i>
            </button>
            <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
                <i class="glyphicon glyphicon-align-justify"></i>
            </button>
            <!-- brand -->
            <a href="#/" class="navbar-brand text-lt">
                <i class="fa fa-btc"></i>
                <img :src="imgArr[0]" alt="." class="hide">
                <span class="hidden-folded m-l-xs">{{app.name}}</span>
            </a>
            <!-- / brand -->
        </div>
        <!-- / navbar header -->

        <!-- navbar collapse -->
        <div class="collapse pos-rlt navbar-collapse box-shadow bg-white-only">
            <!-- buttons -->
            <div class="nav navbar-nav hidden-xs">
                <a href="javascript:void(0)" class="btn no-shadow navbar-btn" @click="asideFold">
                    <i class="fa {{asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
                </a>
            </div>
            <!-- / buttons -->

            <!-- link and dropdown -->
            <ul class="nav navbar-nav hidden-sm">
                <li class="dropdown pd12">
                    <dropdown>
                        <a href="javascript:void(0)" slot="button" class="dropdown-toggle">
                            <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                            <span>{{selectArea}}</span> <span class="caret"></span>
                        </a>
                        <ul slot="dropdown-menu" class="dropdown-menu">
                            <li v-for="item in ['上海','北京','大连']">
                                <a href="javascript:void(0)" @click="setArea(item)">
                                    <!--<i class="glyphicon glyphicon-calendar icon text-info-dker"></i>-->
                                    <span>{{item}}</span>
                                </a>
                            </li>
                        </ul>
                    </dropdown>
                </li>

            </ul>
            <!-- / link and dropdown -->

            <!-- nabar right -->
            <ul class="nav navbar-nav navbar-right">
                <!--语言选择-->
                <!--<li class="dropdown hidden-sm" is-open="lang.isopen" dropdown>
                    <a href class="dropdown-toggle" dropdown-toggle>
                        {{selectLang}} <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight w">
                        <li ng-repeat="(langKey, label) in langs">
                            <a ng-click="setLang(langKey, $event)" href>{{label}}</a>
                        </li>
                    </ul>
                </li>-->

                <li class="dropdown pd12" dropdown>

                    <dropdown>
                        <a href="javascript:void(0)" slot="button" class="dropdown-toggle">
                            <i class="icon-list fa-fw"></i>
                            <span class="visible-xs-inline">任务列表</span>
                            <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
                        </a>
                        <ul slot="dropdown-menu" class="dropdown-menu w-xl animated fadeInUp">
                            <div class="panel bg-white">
                                <div class="panel-heading b-light bg-light">
                                    <strong>您当前有<span>2</span>个任务在运行</strong>
                                </div>

                                <div class="list-group" style="height: 230px;overflow-y: scroll;">
                                    <a href class="media list-group-item">
                                        <span class="task">
                                              <span class="desc"> v1.2 发布</span>
                                              <span class="percent pull-right">30%</span>
                                        </span>
                                        <div class="progress-xs progress">
                                              <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                                <span class="sr-only">40% 完成</span>
                                              </span>
                                        </div>
                                    </a>

                                    <a href class="media list-group-item">
                                        <span class="task">
                                            <span class="desc"> v1.2 发布</span>
                                            <span class="percent pull-right">10%</span>
                                        </span>
                                        <div class="progress-xs progress">
                                            <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                              <span class="sr-only">10% 完成</span>
                                            </span>
                                        </div>
                                    </a>

                                    <a href class="media list-group-item">
                                        <span class="task">
                                            <span class="desc"> v1.2 发布</span>
                                            <span class="percent pull-right">60%</span>
                                        </span>
                                        <div class="progress-xs progress">
                                            <span style="width: 60%;" class="progress-bar progress-bar-info" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                              <span class="sr-only">60% 完成</span>
                                            </span>
                                        </div>
                                    </a>

                                    <a href class="media list-group-item">
                                        <span class="task">
                                            <span class="desc"> v1.2 发布</span>
                                            <span class="percent pull-right">10%</span>
                                        </span>
                                        <div class="progress-xs progress">
                                            <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                              <span class="sr-only">10% 完成</span>
                                            </span>
                                        </div>
                                    </a>
                                </div>

                                <div class="panel-footer bg-light text-sm">
                                    <a href class="pull-right"><i class="fa fa-cog"></i></a>
                                    <a href="#notes" data-toggle="class:show animated fadeInRight">查看所有任务</a>
                                </div>
                            </div>
                        </ul>
                    </dropdown>

                </li>

                <li class="dropdown pd12">

                    <dropdown>
                        <a href="javascript:void(0)" slot="button" class="dropdown-toggle">
                            <i class="icon-bell fa-fw"></i>
                            <span class="visible-xs-inline">消息通知</span>
                            <span class="badge badge-sm up bg-danger pull-right-xs">4</span>
                        </a>
                        <ul slot="dropdown-menu" class="dropdown-menu w-xl animated fadeInUp">
                            <div class="panel bg-white">
                                <div class="panel-heading b-light bg-light">
                                    <strong>您有<span>2</span>条消息通知</strong>
                                </div>
                                <div class="list-group" style="height: 230px;overflow-y: scroll;">
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[1]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          Use awesome animate.css<br>
                                          <small class="text-muted">10 minutes ago</small>
                                        </span>
                                    </a>
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[2]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          1.0 initial released<br>
                                          <small class="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[3]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          1.0 initial released<br>
                                          <small class="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[4]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          1.0 initial released<br>
                                          <small class="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[5]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          1.0 initial released<br>
                                          <small class="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                    <a href class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                          <img :src="imgArr[6]" alt="..." class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                          1.0 initial released<br>
                                          <small class="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                </div>
                                <div class="panel-footer bg-light text-sm">
                                    <a href class="pull-right"><i class="fa fa-cog"></i></a>
                                    <a href="#notes" data-toggle="class:show animated fadeInRight">查看所有消息通知</a>
                                </div>
                            </div>
                        </ul>
                    </dropdown>

                </li>

                <li style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
                    <a href="">
                        ¥47.00
                    </a>
                </li>

                <li class="dropdown" dropdown>
                    <a href class="dropdown-toggle clear" dropdown-toggle>
                      <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                        <img :src="imgArr[7]" alt="...">
                        <i class="on md b-white bottom"></i>
                      </span>
                        <span class="hidden-sm hidden-md">John.Wx</span> <b class="caret"></b>
                    </a>
                    <!-- dropdown -->
                    <ul class="dropdown-menu animated fadeInRight w">
                        <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
                            <div>
                                <p>300mb of 500mb used</p>
                            </div>
                            <!--<progressbar value="60" class="progress-xs m-b-none bg-white"></progressbar>-->
                        </li>
                        <li>
                            <a href>
                                <span class="badge bg-danger pull-right">30%</span>
                                <span>Settings</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref="app.page.profile">Profile</a>
                        </li>
                        <li>
                            <a ui-sref="app.docs">
                                <span class="label bg-info pull-right">new</span>
                                Help
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a ui-sref="access.signin">Logout</a>
                        </li>
                    </ul>
                    <!-- / dropdown -->
                </li>
            </ul>
            <!-- / navbar right -->

        </div>
        <!-- / navbar collapse -->
    </div>
</template>
<style lang="sass">

</style>
<script>

    import {dropdown} from 'vue-strap';

    export default {
        data () {
            return {
                imgArr:["../resources/img/logo.png","../resources/img/b4.jpg","../resources/img/b0.jpg","../resources/img/b1.jpg","../resources/img/b2.jpg","../resources/img/b3.jpg","../resources/img/b5.jpg","../resources/img/a0.jpg"],
                app :{
                    name: 'Paas',
                    version: '1.3.3',
                    color: {
                        primary: '#7266ba',
                        info:    '#23b7e5',
                        success: '#27c24c',
                        warning: '#fad733',
                        danger:  '#f05050',
                        light:   '#e8eff0',
                        dark:    '#3a3f51',
                        black:   '#1c2b36'
                    },
                    settings: {
                        themeID: 1,
                        navbarHeaderColor: 'bg-black',
                        navbarCollapseColor: 'bg-white-only',
                        asideColor: 'bg-black',
                        asideSubColor: 'bg-light',
                        headerFixed: true,
                        asideFixed: false,
                        asideFolded: false,
                        asideDock: false,
                        container: false
                    }
                },
                asideFolded:false,
                selectArea:'上海'
            }
        },
        methods: {
            asideFold () {
                this.asideFolded = !this.asideFolded;
                this.$dispatch('asideFold');
            },
            setArea (obj){
                this.selectArea = obj;
            }
        },
        components:{
            dropdown
        }
    }
</script>
